<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 100px">
                <el-form label-width="120px">
                    <el-row :gutter="24">
                        <el-col :span="12" class="mb20">
                            <el-form-item :label="$t('webAuto.processName')" prop="url">
                                <el-input v-model="props.rowList.fromName" readonly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="mb20">
                            <el-form-item :label="$t('webAuto.ProcessNumber')" prop="url">
                                <el-input v-model="props.rowList.businessKey" readonly/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="12" class="mb20">
                            <el-form-item :label="$t('webAuto.dizhi')" prop="url">
                                <el-input v-model="props.rowList.url" readonly/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="mb20">
                            <el-form-item>
                                <el-button type="primary" plain @click="interfaceCallback" :disabled="loading">接口调用</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-container>
                <el-aside style="width:50%;height:100%;background-color: red;overflow-x: hidden">
                    <el-card shadow="always" style="width: 100%" class="word-wrap">
                        <template #header>{{$t('webAuto.qingqiuCanshu')}}:</template>
                        <VueJsonPretty v-if="!data.show" :data="data.parsed" :editable="true"></VueJsonPretty>
                        <pre v-else>{{ data.parsed }}</pre>
                    </el-card>
                </el-aside>
                <el-main style="width:50%;height:100%;background-color: black;overflow-x: hidden;margin: 0 !important;">
                    <el-card shadow="always" style="width: 100%" class="word-wrap">
                        <template #header>{{$t('webAuto.fanhuiCanshu')}}:</template>
                        <VueJsonPretty :data=" data.errorParsed "></VueJsonPretty>
                    </el-card>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script setup>
import roleApi from '@/api/errorInfo'
import {onMounted, reactive, ref, watch} from 'vue'
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import {ElMessage} from "element-plus";

const visible = ref(false);
const loading = ref(false)
const props = defineProps({
    rowList: {
        type: Array,
        default: []
    }
})

const data = reactive({
    id:'',
    parsed: '',
    errorParsed: '',
    show: false
})

onMounted(() => {
    formatJson()
})

//json格式化
const formatJson = () => {
    data.id = props.rowList.id;
    console.log(props.rowList.json)

    try {
        data.parsed  = JSON.parse(props.rowList.json);
    } catch (error) {
        data.show = true
        data.parsed = props.rowList.json
    }
    data.errorParsed = JSON.parse(props.rowList.errorLog);
}

//回调接口
const interfaceCallback = () => {
    try {
        loading.value = true;
        roleApi.interfaceCallback({id:data.id,json:JSON.stringify(data.parsed)}).then(res => {
            data.errorParsed = JSON.parse(JSON.stringify(res.data));
        })
    }finally {
        loading.value = false;
    }
}
</script>

<style scoped>
.word-wrap {
    white-space: pre-wrap;
    overflow-x: auto;

}
</style>

<style>
.vjs-value-string {
    color: #0403e9;
}

pre {outline: 1px solid #ccc; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>